@media screen and (min-width: 414px) {
    html {
        font-size: 41.4px !important;
    }
}

body {
    min-width: 320px;
    max-width: 414px;
    width: 10rem;
    height: 20.748792rem;
    margin: 0 auto;
}

.baner {
    .swiper-container {
        width: 100%;
        height: 4.830918rem;
        position: relative;
        overflow: hidden;
    }
}

.main {
    margin-top: .483092rem;

    ul {
        width: 9.299517rem;
        margin: 0 auto;

        #listone,
        #listtwo {
            width: 100%;
            height: 2.657005rem;
            border-radius: .483092rem;
            margin-top: .483092rem;
            overflow: hidden;
            color: white;
            font-size: .386473rem;
            font-weight: 600;

        }

        #listone {
            background: url(../img/index-swiper-bg2.jpg) no-repeat 0 -0.641546rem;
            background-size: cover;

            p {
                margin-top: .241546rem;
                margin-left: .241546rem;
            }
        }

        #listtwo {
            background: url(../img/index-card-run.png) no-repeat 0 -0.641546rem;
            background-size: cover;

            p {
                margin-top: .241546rem;
                margin-left: .241546rem;
            }
        }

        .showTop {
            display: flex;
            justify-content: space-around;
            height: 3.623188rem;
            margin-bottom: .483092rem;

            .Topleft {
                width: 3.623188rem;
                background-color: pink;
                border-radius: .241546rem;
                background: url(../img/index-card-rank.png) no-repeat #54afda;
                background-size: contain;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                position: relative;

                p {
                    font-size: .483092rem;
                    color: #0b5b8b;
                    position: absolute;
                    left: .241546rem;
                    top: .241546rem;
                    font-weight: 900;
                }

                span {
                    font-size: 1.15942rem;
                    font-weight: 900;
                    color: white;
                }

            }

            .Topright {
                width: 5.120773rem;
                background: url('../img/index-card-sum.png')no-repeat .241546rem .241546rem #9fd9f8;
                background-size: 3.019324rem;
                border-radius: .241546rem;
                position: relative;

                .TRtop {
                    margin-top: .483092rem;
                    margin-left: .483092rem;
                    font-weight: 900;
                    font-size: .434783rem !important;
                }

                button {
                    width: 2.415459rem;
                    height: .966184rem;
                    border: royalblue 2px solid;
                    background-color: transparent;
                    border-radius: .483092rem;
                    font-size: .386473rem;
                    position: absolute;
                    bottom: .483092rem;
                    right: .241546rem;
                    color: white;
                }
            }
        }

        .showBottom {
            display: flex;
            justify-content: space-around;
            height: 2.657005rem;

            .Bottomleft {
                width: 4.347826rem;
                background: url(../img/index-card-data.png)no-repeat;
                background-size: cover;
                border-radius: .241546rem;

                p {
                    right: .241546rem;
                    margin-top: .483092rem;
                    margin-left: .483092rem;
                    color: white;
                    font-weight: 600;
                }
            }

            .Bottomright {
                width: 4.468599rem;
                background: url(../img/index-card-badge.png)no-repeat .120773rem .483092rem #9dbde3;
                background-size: 2.173913rem;
                border-radius: .241546rem;
                position: relative;
                color: #004e73;

                p {
                    font-size: .386473rem !important;
                    margin-top: .483092rem;
                    margin-left: .483092rem;

                }

                .Brispan {
                    position: absolute;
                    bottom: 0;
                    right: .241546rem;
                    font-size: .676329rem;

                    .shownum {
                        font-size: 1.932367rem;
                    }
                }
            }
        }
    }
}

.showUhdy {
    width: 100%;
    height: 1.859903rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #aaa;

    .showon {
        color: skyblue !important;
    }

    a {
        color: #aaa;
        text-align: center;

        span {
            font-size: .772947rem !important;
        }

        p {
            font-size: .386473rem !important;
        }
    }
}

.clock-t {
    background-color: pink;
}

.clock-f {
    background-color: gray !important;
    color: #fff;
}